<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
   
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid :column-num="4">
      <van-grid-item v-for="value in 8" :key="value" :icon="iconImage[value-1]" text="文字" to="/" />
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "", //搜索框
      images: [
        //轮播图
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      iconImage: [
        //九宫格
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      tabActive: 0
    };
  },
  computed: {},
  methods: {
    //搜索框确认事件
    onSearch() {
      console.log("searchvalue");
    }
  },
  mounted() {}
};
</script>

<style scoped>
.van-swipe {
  margin-top: 2px;
  margin-bottom: 2px;
  height: 200px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
</style>